<!DOCTYPE html>
<html>
<head>
<title>Circuit Diagram</title>
</head>
<body>
<canvas id="circuitCanvas" width="550" height="350"></canvas>
<script>
const canvas = document.getElementById('circuitCanvas');
const ctx = canvas.getContext('2d');

ctx.strokeStyle = 'black';
ctx.lineWidth = 1.5;
ctx.font = '18px sans-serif';
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';

// Coordinates
const x_left_j = 100;
const x_res_start = 120;
const x_res_end = 220;
const x_right_j = 240;
const x_heater_start = 280;
const x_heater_end = 380;
const x_right_wire = 480;

const y_top_wire = 60;
const y_res1 = 120;
const y_res2 = 200;
const y_heater = 160;

// Start drawing all lines in one path for a consistent look
ctx.beginPath();

// Top resistor (10 Ohm)
ctx.moveTo(x_left_j, y_res1);
ctx.lineTo(x_res_start, y_res1);
ctx.rect(x_res_start, y_res1 - 10, x_res_end - x_res_start, 20);
ctx.moveTo(x_res_end, y_res1);
ctx.lineTo(x_right_j, y_res1);

// Bottom resistor (X)
ctx.moveTo(x_left_j, y_res2);
ctx.lineTo(x_res_start, y_res2);
ctx.rect(x_res_start, y_res2 - 10, x_res_end - x_res_start, 20);
ctx.moveTo(x_res_end, y_res2);
ctx.lineTo(x_right_j, y_res2);

// Left vertical connector for parallel part
ctx.moveTo(x_left_j, y_res1);
ctx.lineTo(x_left_j, y_res2);

// Right vertical connector for parallel part (converges at y_heater)
ctx.moveTo(x_right_j, y_res1);
ctx.lineTo(x_right_j, y_heater);
ctx.moveTo(x_right_j, y_res2);
ctx.lineTo(x_right_j, y_heater);

// Heater H
ctx.moveTo(x_right_j, y_heater);
ctx.lineTo(x_heater_start, y_heater);
ctx.rect(x_heater_start, y_heater - 10, x_heater_end - x_heater_start, 20);
// Internal lines for heater symbol
for (let i = 1; i <= 4; i++) {
    const x = x_heater_start + i * (x_heater_end - x_heater_start) / 5;
    ctx.moveTo(x, y_heater - 10);
    ctx.lineTo(x, y_heater + 10);
}

// Outer loop wiring
// Top wire from E to parallel block
ctx.moveTo(x_left_j, y_res1);
ctx.lineTo(x_left_j, y_top_wire);
ctx.lineTo(220, y_top_wire);

// Right wire from E to heater
ctx.moveTo(270, y_top_wire);
ctx.lineTo(x_right_wire, y_top_wire);
ctx.lineTo(x_right_wire, y_heater);
ctx.lineTo(x_heater_end, y_heater);

// Draw all the paths defined above
ctx.stroke();

// Junction Dots (drawn after lines)
ctx.fillStyle = 'black';
ctx.beginPath();
ctx.arc(x_left_j, y_res1, 3.5, 0, 2 * Math.PI);
ctx.fill();
ctx.beginPath();
ctx.arc(x_right_j, y_heater, 3.5, 0, 2 * Math.PI);
ctx.fill();

// Source E symbol (drawn separately to avoid being affected by main stroke)
ctx.beginPath();
ctx.arc(225, y_top_wire, 4, 0, 2 * Math.PI);
ctx.stroke();
ctx.beginPath();
ctx.arc(265, y_top_wire, 4, 0, 2 * Math.PI);
ctx.stroke();

// Text Labels
ctx.fillStyle = 'black';
ctx.fillText('E', 245, y_top_wire - 10);
ctx.fillText('10 Ω', (x_res_start + x_res_end) / 2, y_res1 - 15);
ctx.fillText('X', (x_res_start + x_res_end) / 2, y_res2 + 10 + 20);
ctx.fillText('H', (x_heater_start + x_heater_end) / 2, y_heater - 15);
ctx.fillText('Fig. 8.1', 275, 320);

</script>
</body>
</html>